import React from 'react'
import { Avatar, Breadcrumb, Dropdown, Layout, Menu, message, Space } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import { HomeOutlined, SmileOutlined } from '@ant-design/icons'
import { logoutAsync, useSelectorAuth } from '@/store/slice/auth'
import { useAppDispatch, useAppNavigation } from '@/hooks'

function IndexHeader() {
    // 获取用户信息
    const auth = useSelectorAuth()
    const dispatch = useAppDispatch()
    const navigate = useNavigate()

    const { Header } = Layout
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: <Link to={'/'}>返回首页</Link>,
                    icon: <HomeOutlined />
                },
                {
                    key: '2',
                    label: (
                        <div
                            onClick={async (e) => {
                                await dispatch(logoutAsync())
                                message.success('退出成功')
                                navigate('/login')
                            }}
                        >
                            退出登陆
                        </div>
                    ),
                    icon: <SmileOutlined />
                }
            ]}
        />
    )
    const { title, subTitle } = useAppNavigation()
    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>{title}</Breadcrumb.Item>
                <Breadcrumb.Item>{subTitle}</Breadcrumb.Item>
            </Breadcrumb>

            <Space>
                <span>欢迎回来{auth.userInfo.name}!</span>
                <Dropdown overlay={menu}>
                    <div style={{ cursor: 'pointer' }} onClick={(e) => e.preventDefault()}>
                        <Avatar src={auth.userInfo.avatar} />
                    </div>
                </Dropdown>
            </Space>
        </Header>
    )
}

export default IndexHeader
